<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--
    需求:
    1.展示页面
    2.删除功能
    3.添加功能

 -->
<div id="app">
    <table border="1px" width="50%" height="400px" align="left" cellspacing="0" cellpadding="10px" >
        <tr align="left" bgcolor="#a9a9a9">
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item , index) in items"  align="left">
            <td style="min-width: 30px">{{index + 1}}  </td>
            <td style="min-width: 200px">{{item.name}}</td>
            <td style="min-width: 80px">{{item.date}}</td>
            <td style="min-width: 80px">¥ {{item.price.toFixed(2)}}</td>
            <td style="min-width: 80px"><button :disabled="item.count === 1" @click=remove(index)>-</button> {{item.count}} <button @click=add(index)>+</button></td>
            <td style="min-width: 60px"><input type="button" value="移除" @click="deleteItem(index)"></td>
        </tr>
        <tr align="center">
            <td colspan="6">总价格{{total.toFixed(2)}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data : {
            items : [
                {
                    name:"《java编程思想》",
                    date:"2020-9",
                    price:98.00,
                    count:1
                },
                {
                    name:"《数据分析与数据原理》",
                    date:"2019-2",
                    price:39.00,
                    count:1
                },
                {
                    name:"《Hadoop权威指南》",
                    date:"2019-10",
                    price:59.00,
                    count:1
                },
                {
                    name:"《代码大全》",
                    date:"2018-8",
                    price:128.00,
                    count:1
                }],
            name:'',
            total:0
        },
        methods : {
            deleteItem:function(index){
                //确认删除提示
                if(confirm("您是否确认删除?")){
                    //删除一行元素  splice(index,个数)
                    var count = this.items[index].count
                    var price = this.items[index].price
                    this.items.splice(index,1);
                    this.total -= count*price
                }
            },
            add:function(index){
                this.items[index].count +=1;
                this.total += this.items[index].price
            },
            remove:function(index){
                this.items[index].count -=1;
                this.total -= this.items[index].price
            }
        },
        mounted(){
            for(var i = 0; i < this.items.length; i++){
                this.total += this.items[i].count*this.items[i].price
            }
        }
    })
</script>
</html>